<!-- 课程列表 组件 -->
<template>
	<!-- 组件外层容器 -->
	<view class="main">
<!-- 下拉菜单   -->
			<dropDown 
				:list="person"
				@workId='getWorkId'
				@touchmove.stop.prevent="stopMove"
			/>
<!--循环体-->
		<scroll-view 
			scroll-y
			refresher-enabled
			:style="windowHeight"
			:refresher-triggered='refresh'
			@scrolltolower="reachBottom"
			@refresherrefresh="pullDownRefresh" 
		>
				<view 
					v-for="(item,index) in courseList" 
					class="itemBox" 
					:key="index" 
					@click='itemClick(item.id,item.study_chapter_id)'
				>
		<!--单个item-->
					<view class="item">
						<u-image 
							width="210rpx" 
							height="126rpx" 
							border-radius='15rpx'
							:src="item.thumb" 
						/>
		<!--    单个item右侧盒子   -->
						<view class="itemRight"> 
		<!--    第一排      -->
							<view class="itemTitle">{{ item.title }}</view>
		<!--    第二排      -->
							<view class="studyTime">
								<view 
								class="mustStudy" 
								v-if="item.bi_score"
								>
									必修学时：{{item.bi_study_score}}/{{item.bi_score}}
								</view>
								<view 
									v-if="item.bi_score&&item.xuan_score"
									class="liney" 
								>
								</view>
								<view 
									v-if="item.xuan_score"
									class="mayStudy" 
								>
									选修学时：{{item.xuan_study_score}}/{{item.xuan_score}}
								</view>
							</view>
		<!--    第三排-->
							<view class="studyDoing">
								<view class="isStudyStart">
									<u-tag 
										size='mini' 
										:text="item.study_status_txt" 
										:type="studyStatus[item.study_status]"
									/>
								</view>
							</view>
						</view>
					</view>
					<view class="line">
					</view>
				</view>
			<view 
				v-if="!(courseList.length)" 
				style="text-align: center;padding-top: 100rpx;">
				<u-empty 
					text="课程更新中..." 
					mode="list"
				/>
			</view>
		</scroll-view>
		<modal-info
			ref="myModalInfoDjy"
			:tag="toast.list[toast.index].tag"
			:mode="toast.list[toast.index].mode"
			:title="toast.list[toast.index].title"
			:content="toast.list[toast.index].content"
			:confirmText="toast.list[toast.index].confirmText"
			:cancelText="toast.list[toast.index].cancelText"
			@confirm="onConfirm"
			@cancel="onCancelCall"
		>
		</modal-info>
	</view>
	
	 
</template>
<script>
	// 接口请求文件
	// 接口请求文件
	// 接口请求文件


	import dropDown from './component/dropDown';
	import request from '@/pagesB/common/js/request/course.js'
	// import UImage from 'uview-ui/components/u-image/u-image';
	import { routerParamUrl } from '@/common/js/public/utils.js';
	export default {
		components: {
			// UImage,
			dropDown
		},
		// 页面数据
		data() {
			return {
				studyStatus:["error","warning","success"],
				title:'',
				autoStopRef:null,
				toast: {
					index: 0, // 显示信息下标
					list: [
						// 真实照片上传提示框
						{
							tag: "photo",
							mode: "primary",
							title: "信息补充",
							content: "观看视频过程中会识别是否本人观看，为了核对您的身份，我们将会采集您的人脸",
							confirmText: '立即采集',
							cancelText: "取消",
						},
						// 摄像头权限授权提示框
						{
							tag: "facethan",
							mode: "primary",
							title: "学习提醒",
							content: "为了核对您的身份，学习课程的过程中会验证是否为本人观看",
							confirmText: null,
							cancelText: "我知道了",
						}
					],
				},
				courseList: []   //课程列表数据
				,
				// 课程信息
				course: {
					isNext: true, // 是否可以请求下一页数据
					yema: 1,      // 当前页码
					pagesize: 10, // 每页条数
					list: [],     // 总数据列表
				},
				courseNum:{},   //课程id和小节id
				option:{},		//首页传过来的地址参数
				person:[],      //工种的列表
				workId: '',     //工种的id
				windowHeight:"",//手机品目高度
				refresh: false,  //下拉刷新的是否开启
				reqData:{}
				
			};
		},
		
		onLoad(options) {
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight="height:"+(res.windowHeight-40)+"px"
				}
			})
			this.option = options
			this.title = options.name
			uni.setNavigationBarTitle({
				title: options.name
			});
			this.requestList()
		},

		// 页面事件
		methods: {
			reachBottom() {
				// 可以请求下一页数据 才执行
				if (this.course.isNext){
					// 当前页码+1
					this.course.yema ++;
					// 全部课程总列表 请求
					this.requestList();
				}else {
				}
			},
			pullDownRefresh() {
				// 课程信息 赋值
				this.course.isNext = true;
				this.course.yema = 1;
				this.requestList();
			},
			stopMove() { return null },
			
			requestList(){
				let data = {};
				if(parseInt(this.option.nature) === 2) {
					data = {
						id : this.option.id,
						page : this.course.yema,
					}
				}else {
					data = {
						id: this.option.id,
						workId: this.workId,
						page: this.course.yema
					}
					request.getPersonList({
						success:res => {
							let persinList = res.slice(1)
							this.person = persinList
						}
					})
				}
				
				this.reqData = {
					...data,
					cert_id:this.option.enterId,
					item_type:2,
					course_category_pid:this.option.id
				}
				 delete this.reqData.id
				this.refresh = true
				
				if(this.option.item_type == 2){
					request.courseInfoLists({
						data:this.reqData,
						success: res => {
							this.refresh = false
							if(this.course.yema === 1){
								this.courseList = res.list
							}else{
								// this.courseList.concat(res.list);
								this.courseList = [...this.courseList, ...res.list]
								if(this.courseList.length === res.count) {
									this.course.isNext = false
								}
							}
						},
						fail: () => this.refresh = false
					})
				}else{
					request.getWorkList({
						...data,
						success:res => {
							this.refresh = false
							if(this.course.yema === 1){
								this.courseList = res.list
							}else{
								this.courseList = [...this.courseList, ...res.list]
								if(this.courseList.length === res.count) {
									this.course.isNext = false
								}
							}
						},
						fail: () => this.refresh = false
					})
				}
				
				
			},
			
			//工种id获取
			getWorkId(data){
				if(data.id){
					this.workId = data.id
					this.reqData.workId =  data.id
					this.reqData.page =  1
				}else{
					this.workId = ""
				}
				this.course.isNext = true;
				this.course.yema = 1;
				if(this.option.item_type == 2){
					request.courseInfoLists({
						data:this.reqData,
						success:res=>{
							if(this.course.yema === 1){
								this.courseList = res.list
							}else{
								this.courseList.concat(res.list)
								if(res.list.length < 10){
									this.course.isNext = false
								}
							}
						},
					})
				}else{
					request.getWorkList({
						id:this.option.id,
						workId:this.workId,
						page:this.course.yema,
						success:res=>{
							if(this.course.yema === 1){
								this.courseList = res.list
							}else{
								this.courseList.concat(res.list)
								if(res.list.length < 10){
									this.course.isNext = false
								}
							}
						},
					})
				}
				
			},
			
			// 课程点击时间
			itemClick(courseId,jieId) {
				if(this.option.item_type == 2){
					this.courseNum = {
						courseId, 
						jieId,
						item_type:2,
						cert_id:this.option.enterId
					}
				}else{
					this.courseNum = {
						courseId, 
						jieId,
					}
				}
				// 获取临时缓存
				var save_short = uni.$focus.varShortTime('get');
				// 如果已经登录 并且 已经实名 并且 有真实照片
				// save_short && save_short.id && save_short.is_auth==2 && save_short.scene_img_url && save_short.scene_img_url.length>6
				if (save_short && save_short.id)
				{
					// // 如果已经进行过“人脸对比”提示
					// if (save_short.tips_modal_faceThan == true)
					// {
					// 	uni.$focus.pageJump('/pagesB/pages/course/details/index', this.courseNum);
					// }
					// // 没有提示过
					// else {
					// 	// 弹出第2类弹框
					// 	this.toast.index = 1;
					// 	// 人脸对比弹框提示
					// 	this.$refs.myModalInfoDjy.open();
					// }
					uni.$focus.pageJump('/pagesB/pages/course/details/index', this.courseNum);
				}
				// 进行登录要求 回父
				else if (!save_short || !save_short.id)
				{
					// this.$emit('logintouch', { "tag": this.tag });
				}
				// // 进行实名认证
				// else if (save_short.is_auth!=2){
				// 	uni.showModal({
				// 		confirmColor:"#F0AD4E",
				// 		confirmText:"立即认证",
				// 		cancelText:'暂不认证',
				// 		title: '实名认证',
				// 		content: (save_short.is_auth===4)?"实名认证信息已更新,请进行信息补全,重新认证后可进行安全培训":'您未实名认证，请先实名认证',
				// 		success: (btn_res) => {
				// 			if (btn_res.confirm) {
				// 				uni.navigateTo({
				// 					url: "/pages/realname/index"
				// 				})
				// 			}
				// 		}
				// 	});
					
				// }
				// // 如果未上传真实照片
				// else if (!save_short.scene_img_url || save_short.scene_img_url.length<=6)
				// {
				// 	// 弹出第1类弹框
				// 	this.toast.index = 0;
				// 	// 人脸对比弹框提示
				// 	this.$refs.myModalInfoDjy.open();
				// }
			},
		
		    onCancelCall(objD) {
				// 只有摄像头权限授权提示框 才执行
				if (objD.tag == 'facethan')
				{
					// 临时缓存：进行过“人脸对比”提示
					uni.$focus.varShortTime('set', { "tips_modal_faceThan": true });
					// 是否获取到了摄像头权限
					uni.authorize({
						scope: 'scope.camera',
						fail: () => {
							// 跳转到 视频播放页面
							uni.$focus.pageJump('/pages/course/details/index', this.courseNum);
						},
						success: () => {
							// 跳转到 视频播放页面
							uni.$focus.pageJump('/pages/course/details/index', this.courseNum);
						}
					});
				}
			},
			
			onConfirm(objD) {
				// 只有真实照片上传提示框 才执行
				if (objD.tag == 'photo')
				{
					// 自定义拍照方法调用
					project.cameraCustom({
						type: 'portrait', // 拍照类型： none-无拍照蒙层  portrait-头像拍照  IDCard-身份证拍照
						size: 'middle', // 生成图片尺寸： low-小尺寸  middle-中等尺寸  high-大尺寸
						album: false, // 是否开启相册选图
						success: (photoD) => {
							// 进行人脸检测
							this.userFaceDetectionReq(photoD.data, ()=>{
								
								// 进行图片上传
								request.imgUpload({
									data: {
										file: photoD.path, // 文件资源地址
									},
									success: (res) => {
										// 修改用户真实照片数据
										this.userInfoEditReq(res.id);
									},
								});
								
							});
						},
					});
				}
			},
			// =============================================== 接口请求
			// 人脸检测，参数：base64C-待检测图片base64数据值 callback-识别成功回调
			userFaceDetectionReq(base64C, callback) {
				// 加载框提示
				uni.showLoading({ title: '正在人脸检测' });
				// 人脸检测通用接口api
				request.userFaceDetection({
					data: {
						image_type: 'BASE64', // 图片类型：base64编码后的图片数据，编码后的图片大小不超过2M
						image: base64C, // 图片信息
					},
					fail: () => {
						// 取消加载框
						uni.hideLoading();
						// 错误提示
						uni.showToast({
							title: '人脸检测未通过，请重新采集',
							duration: 2500,
							icon: 'none'
						});
					},
					success: () => {
						// 取消加载框
						uni.hideLoading();
						// 通过了人脸检测 成功回调
						if (callback) { callback(); }
					},
				});
			},
			
			// 修改用户信息，参数：idC-要修改为的id
			userInfoEditReq(idC) {
				// 修改信息请求调用
				request.userInfoEdit({
					data: {
						field_name: 'scene_img', // 具体要修改的项标识：‘真实照片’
						value: idC, // 要修改为的显示结果
					},
					success: (res) => {
						// 加载框提示
						uni.showLoading({ title: '更新用户信息' });
						// 延时执行
						setTimeout(()=>{
							// 重新获取token
							request.tokenGet({
								fail: () => {
									// 取消加载框
									uni.hideLoading();
								},
								success: () => {
									// 取消加载框
									uni.hideLoading();
									// 成功提示
									uni.showToast({
										title: '人脸采集成功',
										duration: 1500,
										icon: 'success'
									});
								}
							});
						}, 500);
					},
				});
			},
			
		}
	};
</script>
<style lang="less" scoped>
	.main {
		.title {
			margin-right: 10 rpx;
			width: 280 rpx;
			height: 40 rpx;
			font-size: 28 rpx;
			font-family: PingFangSC, PingFangSC-Medium;
			font-weight: 500;
			text-align: center;
			color: #4a87fd;
			line-height: 40 rpx;
			display: inline-block;
		}

		.line {
			height: 1rpx;
			width: 702rpx;
			background-color: #E5E5E5;
			margin: auto;
		}

		.item {
			display: flex;
			width: 749 rpx;
			justify-content: space-evenly;
			margin: 30rpx 0 30rpx 0;

			.itemRight {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				height: 126rpx;

				.itemTitle {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					width: 450rpx;
					height: 42rpx;
					font-size: 30rpx;
					font-family: PingFangSC, PingFangSC-Medium;
					font-weight: 500;
					text-align: left;
					color: #262626;
					line-height: 42rpx;
				}

				.studyTime {
					display: flex;

					.liney {
						width: 1rpx;
						height: 30rpx;
						background-color: #A6A6A6;
						margin: 0 20rpx 0 20rpx;
					}

					.mustStudy {

						height: 30rpx;
						font-size: 22rpx;
						font-family: PingFangSC, PingFangSC-Regular;
						font-weight: 400;
						text-align: left;
						color: #ff4d4f;
						line-height: 30rpx;
					}

					.mayStudy {

						height: 30rpx;
						font-size: 22rpx;
						font-family: PingFangSC, PingFangSC-Regular;
						font-weight: 400;
						text-align: left;
						color: #4a87fd;
						line-height: 30rpx;
					}

				}

			}

		}

		/deep/ .u-dropdown__menu__item {
			justify-content: start;
			margin-left: 20rpx;
		}
		/deep/ .u-dropdown__content {
		    // max-height: 200px;
		    height: 100vh;
		}
	}
</style>
